<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<body class="hold-transition skin-blue sidebar-mini">

<section class="content-header">
    <h1>
        还料操作列表
    </h1>
</section>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <div class="row">
                        <div class="form-inline">
                            <div class="form-group" style="margin-right: 10px;">
                                <label>
                                    还料状态
                                </label>
                                <select id="statusQuery" name="statusQuery" class="form-control select2">
                                    <option value="未还完" selected="selected">未还完</option>
                                    <option value="已还完">已还完</option>
                                    <option value="无需还">无需还</option>
                                    <option value="">全部</option>
                                </select>
                            </div>
                            <div class="form-group" style="margin-right: 10px;">
                                <label>项目名称</label>
                                <input type="text" id="proNameQuery" name="proNameQuery" class="form-control"
                                       placeholder="请输入项目名称">
                            </div>
                            <div class="form-group" style="margin-right: 10px;">
                                <label>原料描述</label>
                                <input type="text" id="materialDescQuery" name="materialDescQuery" class="form-control"
                                       placeholder="请输入原料描述">
                            </div>
                            <div class="form-group" style="margin-right: 10px;">
                                <label>使用部门</label>
                                <input type="text" id="needDepartmentQuery" name="needDepartmentQuery"
                                       class="form-control"
                                       placeholder="请输入使用部门">
                            </div>
                            <div class="form-group" style="margin-right: 10px;">
                                <button class="btn btn-vk" id="btn_search">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;搜索&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button>
                            </div>
                            <div class="form-group" style="margin-right: 10px;">
                                <button id="btnFilter" type="button" class="btn btn-block" data-toggle="collapse"
                                        data-target="#queryHiddenDiv">
                                    <!--<span class="glyphicon glyphicon-filter"></span>-->显示更多条件
                                </button>
                                <!--btn-social-->
                            </div>
                            <div class="form-group" style="margin-right: 10px;">
                                <button shiro:hasPermission="returnmaterial:create" type="button"
                                        class="btn btn-info pull-right"
                                        id="btn-togetherMark">
                                    忽略提醒
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="row collapse" id="queryHiddenDiv" style="margin-top: 10px">
                        <div class="form-inline">
                            <div class="form-group" style="margin-right: 10px;">
                                <label>申请单号</label>
                                <input type="text" id="lendCodeQuery" name="lendCodeQuery" class="form-control"
                                       placeholder="请输入申请单号">
                            </div>
                            <div class="form-group" style="margin-right: 10px;">
                                <label>项目编号</label>
                                <input type="text" id="proCodeQuery" name="proCodeQuery" class="form-control"
                                       placeholder="请输入项目编号">
                            </div>
                            <div class="form-group" style="margin-right: 10px;">
                                <label>制单日期</label>
                                <input type="text" class="form-control datepicker" id="startTimeQuery"
                                       readonly="readonly"/>
                                <span>至</span>
                                <input type="text" class="form-control datepicker" id="endTimeQuery"
                                       readonly="readonly"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box-body" style="padding-top: 0px;">
                    <table id="returnMaterialTable" class="table table-bordered" width="100%">
                        <thead>
                        <tr>
                            <th><input type="checkbox" name="select_all" id="select-all"></th>
                            <th>申请单号</th>
                            <th>需求项目编号</th>
                            <th>需求项目名称</th>
                            <th>需求物料描述</th>
                            <th>需求重量</th>
                            <th>使用部门</th>
                            <th>挪用项目编号</th>
                            <th>挪用项目名称</th>
                            <th>挪用计划编码</th>
                            <th>挪用物料描述</th>
                            <th>挪用重量</th>
                            <th>申请日期</th>
                            <th>还料状态</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>
<div id="goToTop"
     th:style="|position:fixed; right:0px; bottom:10px; width:20px; height:75px; background-image: url(@{/img/gototop.gif}); cursor:pointer|"></div>
<div th:include="include :: footer"></div>

<script th:inline="javascript">

    var ctx = ctx + 'mm'

    $(function () {

        // 加载列表
        $.table.init({
            buttons: [
                {
                    extend: 'excel',
                    text: '导出Excel',
                    className: 'btn btn-success pull-right',
                    filename: '还料操作',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
                    }
                }
            ],
            id: "returnMaterialTable",
            info: true,
            fixedHeader: true,
            scrollX: true,
            dom: "Tf<'row'<'col-sm-5 col-sm-offset-6'p><'col-sm-1'B>>t<'row DTTTFooter'<'col-sm-6'i><'col-sm-5'p><'col-sm-1'B>>",
            url: ctx + "/returnmaterial/list",
            fixedColumns: {
                rightColumns: 1
            },
            data: {
                statusQuery: $("#statusQuery").val()
            },
            columns: [
                {
                    data: null,
                    render: function (data, type, row, meta) {
                        if (data.materialReturnFlg != null && data.materialReturnFlg.indexOf("已回货") >= 0 && data.status === "未还完") {
                            return '<input class="checkbox_select" type="checkbox" value="' + $('<div/>').text(row.id).html() + '">';
                        } else {
                            return "";
                        }
                    }
                },
                {
                    data: "lendCode"
                },
                {
                    data: "needProCode"
                },
                {
                    data: "needProName"
                },
                {
                    data: "needMaterialDesc"
                },
                {
                    data: "needWgt",
                    width: "60px"
                },
                {
                    data: "needDepartment",
                    width: "60px"
                },
                {
                    data: "lendProCode"
                },
                {
                    data: "lendProName"
                },
                {
                    data: "lendTrackCode"
                },
                {
                    data: "lendMaterialDesc"
                },
                {
                    data: "outWgt"
                },
                {
                    data: "billDate"
                },
                {
                    data: "status",
                    render: function (data, type, row, meta) {
                        if (data === '未还完') {
                            return '<span class="label label-warning">未还完</span>';
                        }
                        if (data === '已还完') {
                            return '<span class="label label-success">已还完</span>';
                        }
                        if (data === '无需还') {
                            return '<span class="label label-primary">无需还</span>';
                        }
                    }
                },
                {
                    data: "id",
                    "width": "50px",
                    render: function (data, type, row, meta) {
                        var html = [];
                        html.push('<a class="btn btn-info btn-xs returnmaterial-view" href="' + ctx + '/returnmaterial/view/ ' + data + '">查看</a>');
                        html.push('<a class="btn btn-success btn-xs returnmaterial-create"  href="' + ctx + '/returnmaterial/create/' + data + '" >还料</a>');
                        return html.join('');
                    }
                }
            ],
            createdRow: function (row, data, index) {
                if (data.materialReturnFlg != null && data.materialReturnFlg.indexOf("已回货") >= 0 && data.status === "未还完") {
                    $(row).css('color', '#00A65A');
                }
            },
            drawCallback: function () {
                if ($.inArray('*:*:*', permissions) === 0) {
                    return;
                }
                if ($.inArray('returnmaterial:create', permissions) === -1) {
                    $(".returnmaterial-create").remove();
                }
                if ($.inArray('returnmaterial:view', permissions) === -1) {
                    $(".returnmaterial-view").remove();
                }
            }
        });

        //页面上点击此属性，将当前页的列表数据全部选中
        $('#select-all').on('click', function () {
            if (this.checked) {
                $('.checkbox_select').each(function () {
                    this.checked = true;
                });
            } else {
                $('.checkbox_select').each(function () {
                    this.checked = false;
                });
            }
        });

        // 批量忽略
        $("#btn-togetherMark").click(function () {

            //获取checkbox[name='check']的值
            var arr = new Array();

            $("#returnMaterialTable input:checkbox:checked").each(function (i, value) {
                arr.push($(this).val());
            });

            if (arr.length <= 0) {
                $.modal.warning("请至少选择一个忽略信息");
                return false;
            }

            $.modal.confirm("确定要批量忽略还料提醒吗?", function () {
                $.operate.post(ctx + "/returnmaterial/togetherIgnore", JSON.stringify(arr), function (result) {
                    $.modal.success(result.content);
                    $.table.refresh();
                }, "application/json", true)
            });

        });

        // 搜索
        $("#btn_search").click(function () {
            $.table.search({
                lendCodeQuery: $("#lendCodeQuery").val(),
                proCodeQuery: $("#proCodeQuery").val(),
                proNameQuery: $("#proNameQuery").val(),
                materialDescQuery: $("#materialDescQuery").val(),
                needDepartmentQuery: $("#needDepartmentQuery").val(),
                statusQuery: $("#statusQuery").val(),
                startTimeQuery: $("#startTimeQuery").val(),
                endTimeQuery: $("#endTimeQuery").val()
            });
        });

        $('#queryHiddenDiv').on('show.bs.collapse', function () {
            $("#btnFilter").text("");
            var txt1="<!--<span class='glyphicon glyphicon-filter'></span>-->隐藏更多条件";
            $("#btnFilter").append(txt1);
        })

        $('#queryHiddenDiv').on('hide.bs.collapse', function () {
            $("#btnFilter").text("");
            var txt1="<!--<span class='glyphicon glyphicon-filter'></span>-->显示更多条件";
            $("#btnFilter").append(txt1);
        })

    });

</script>

</body>
</html>